<!--
 * @Description: 路侧管理
 * @Author:       zhaixiangjun
 * @Date: 2021-11-02 14:00:49
 * @LastEditors:  zhengxu
 * @LastEditTime: 2021-11-11 17:59:57
-->
<template>
  <BaseOperateTable
    ref="refPage"
    :show-selection="true"
    :header="columns"
    :query-url="queryUrl"
    :delete-url="deleteUrl"
    :data-filter="tabelDataFilter"
    @operate="tableOperate"
    @query="query"
    @reset="resetCondition">
    <template v-slot:condition>
      <div>路线名称：
        <a-input
          v-model:value="condition.name"
          :allow-clear="true"
          placeholder="请输入路线名称"/>
      </div>
      <div>路线方向：
        <a-select
          v-model:value="condition.direction"
          :options="RouteDirectionList"
          :allow-clear="true"
          placeholder="请选择路线方向"/>
      </div>
      <div>创建时间：
        <a-range-picker
          v-model:value="createTimeRange"
          style="width:200px"
          format="YYYY-MM-DD"
          @change="onCreateTimeRangeChange" />
      </div>
    </template>
    <template v-slot:operate>
      <a-button
        type="primary"
        @click="addData">添加路线</a-button>
      <a-button
        type="primary"
        danger
        @click="batchDelete">删除路线</a-button>
    </template>
  </BaseOperateTable>
  <BaseFormDialog
    ref="refAddDataDialog"
    :title="dialogTitle"
    :rules="addDataRules"
    :form="addDataForm"/>
  <ImportDialog
    v-if="importDialogVisible"
    v-model:visible="importDialogVisible"
    :import-url="addRouteUrl"
    @onSuccess="onImportFileSuccess"/>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { RouteDirectionList } from '@/config/simulation'
import BaseOperateTable from '@/components/BaseOperateTable.vue'
import BaseFormDialog from '@/components/BaseFormDialog.vue'
import { editRoute } from '@/api/simulation/routeConfig'
import { BasePath } from '@/api/request'
import ImportDialog from './ImportDialog.vue'

const refPage = ref(null) // 表格实例
const refAddDataDialog = ref(null) // form表单弹窗实例
const dialogTitle = ref('添加路线') // form表单弹窗标题
const importDialogVisible = ref(false) // 导入弹窗显隐

/** ========== Table ========== */
const queryUrl = ref(`${BasePath}/route/page`) // 分页查询接口URL
const deleteUrl = ref(`${BasePath}/route/`) // 批量删除接口URL
const addRouteUrl = ref(`${BasePath}/route`) // 添加路线接口URL

/** 表格标题栏配置 */
const columns = ref([
  {
    title: '路线名称',
    dataIndex: 'name',
    width: 200,
    ellipsis: true
  },
  {
    title: '数据格式',
    dataIndex: 'fileType',
    width: 160,
    ellipsis: true
  },
  {
    title: '路线方向',
    dataIndex: 'directionLabel',
    width: 160,
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 160,
    ellipsis: true
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 160,
    ellipsis: true
  },
  {
    title: '操作人',
    dataIndex: 'updateBy',
    width: 120,
    ellipsis: true
  }
])
/** 表格数据过滤 */
const tabelDataFilter = (rows) => {
  const result = []
  rows.forEach((item) => {
    let i = { ...item }
    i.directionLabel = RouteDirectionList[i.direction].label
    result.push(i)
  })
  return result
}

/** 表格操作列事件 */
const tableOperate = ({ eventType, data }) => {
  if (eventType === 'edit') {
    dialogTitle.value = '编辑路线'
    refAddDataDialog.value.setRequest(editRoute, () => {
      refPage.value.query()
    })
    refAddDataDialog.value.setFormData(data)
    refAddDataDialog.value.show()
  }
}

/** ========== Condition ========== */
const createTimeRange = ref([])
// 查询条件
const condition = reactive({
  name: undefined,
  direction: undefined,
  startTime: undefined,
  endTime: undefined
})

/** 重置条件 */
const resetCondition = () => {
  condition.name = undefined
  condition.direction = undefined
  condition.startTime = undefined
  condition.endTime = undefined
  createTimeRange.value = []
}

/** 创建时间改变事件 */
const onCreateTimeRangeChange = (v1, v2) => {
  if (v2.length === 2) {
    let[startTime, endTime] = v2
    condition.startTime = v1.length?(startTime + ' 00:00:00') : undefined
    condition.endTime =  v1.length?(endTime + ' 23:59:59') : undefined
  }
}

/** 点击查询按钮后，进行表格查询 */
const query = () => {
  refPage.value.queryByCondition(condition, true)
}

/** ========= Operate ========== */
/** 添加数据 */

const addData = () => {
  importDialogVisible.value = true
}

const onImportFileSuccess = () => {
  importDialogVisible.value = false
  resetCondition()
  refPage.value.resetQuery()
}

/** 批量删除 */
const batchDelete = () => {
  refPage.value.deleteSelectedRows()
}

/** ========== 表单模块 ========== */

// 表单的配置
const addDataForm = ref([
  { key: 'id', ignore: true },
  { key: 'name', value: undefined, label: '路线名称' },
  { key: 'direction', value: undefined, label: '路线方向', type: 'select', options: RouteDirectionList }
])
// 表单校验规则
const addDataRules = reactive({
  name: [
    { required: true, message: '请输入路线名称', trigger: 'blur' }
  ],
  direction: [
    { required: true, message: '请选择路线方向', trigger: 'blur', type: 'number' }
  ]
})
</script>
<script>
export default {
  name: 'routeConfig'
}
</script>